<template>
  <PageWrapDrawer :show="show" title="重置密码"
  @success="onSubmit"
  @on-drawer-close="onClose">
    <Form name="basic"
          :model="passwordData.data"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          autocomplete="off"
          layout="horizontal">
      <FormItem label="账号" name="username">
        <Input v-model:value="passwordData.data.username" disabled/>
      </FormItem>
      <FormItem label="姓名" name="name">
        <Input v-model:value="passwordData.data.name" disabled/>
      </FormItem>
      <!-- <FormItem label="当前密码" name="passwordOld" v-bind="validateInfos['data.passwordOld']">
        <InputPassword v-model:value="passwordData.data.passwordOld"/>
      </FormItem> -->

      <FormItem label="新密码" name="passwordNew" v-bind="validateInfos['data.passwordNew']">
        <!-- <InputPassword v-model:value="passwordData.data.passwordNew"/> -->
        <StrengthMeter placeholder="新密码" :show-input="true" v-model:value="passwordData.data.passwordNew"/>
      </FormItem>

      <FormItem label="确认密码" name="confirmPassword" v-bind="validateInfos['data.confirmPassword']">
        <StrengthMeter placeholder="确认密码" :disabled="cpwdDisabled" v-model:value="passwordData.data.confirmPassword"/>
        <!-- <InputPassword v-model:value="passwordData.data.confirmPassword"/> -->
      </FormItem>
    </Form>
  </PageWrapDrawer>

</template>
<script lang="ts" name="ChangePasswordDrawer" setup>
import { reactive, watchPostEffect, toRaw } from 'vue';
import {PageWrapDrawer} from '/@/components/PageWrapDrawer'
import { StrengthMeter } from '/@/components/StrengthMeter';

import { computed } from '@vue/reactivity';
import {
  Form, FormItem, Input,
} from 'ant-design-vue';
import {resetPassword} from '/@/api/sys/user';

const emit = defineEmits(['on-success', 'on-drawer-close'])
const props = defineProps({
  show: Boolean,
  row: {type: [Object, null] as PropType<Object | null>, default: null,},
})

const rulesRef = reactive({
  // 'data.passwordOld': [
  //   {required: true, message: '请输入当前密码',},
  // ],
  'data.passwordNew': [
    {required: true, validator: (_, value) => {
      if (!value) {
        return Promise.reject('新密码不能空');
      }
      if (value.trim().length < 6) {
        return Promise.reject('新密码不能少于6位');
      }
      return Promise.resolve();
    },},
  ] as unknown,
  'data.confirmPassword': [
    {required: true, validator: (_, value) => {
      if (!value) {
        return Promise.reject('密码不能为空');
      }
      if (value.trim().length < 6) {
        return Promise.reject('密码不能少于6位');
      }
      if (passwordData.data.passwordNew !== value) {
        return Promise.reject('两次输入的密码不一致!');
      }
      return Promise.resolve();
    }},
  ],
});

const useForm = Form.useForm;
const passwordData = reactive({data: {
  id: null,
  username: '',
  name: '',
  // passwordOld: '',
  passwordNew: '',
  confirmPassword: '',
}})

const {resetFields, validate, validateInfos} = useForm(passwordData, rulesRef, {
  onValidate: (...args) => {
  },
});

watchPostEffect(() => {
  let v1 = props.row as any
  if (v1) {
    passwordData.data.id = v1.id
    passwordData.data.username = v1.username
    passwordData.data.name = v1.name
  }
})

const cpwdDisabled = computed(() => {
  if (passwordData.data.passwordNew && passwordData.data.passwordNew.trim().length >= 6) {
    return false
  }
  return true
})

const onSubmit = () => {
  validate()
    .then(async () => {
      let data = toRaw(passwordData.data)
      resetPassword(data).then(() => {
        Object.assign(passwordData, {data: {}});
        emit('on-success')
      })
    }).catch(err => {
    console.log('error-----', err);
  });
}

const onClose = () => {
  Object.assign(passwordData, {data: {}});
  resetFields()
  emit('on-drawer-close');
};
</script>
